<template>
  <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '景区评论统计',
      statisticsData: {
        names: [],
        counts: []
      }
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      this.$axios.get('/statistics/comment-count').then(res => {
        var resData = res.data.data
        console.log(resData)
        res.data.data.forEach(item => {
          this.statisticsData.names.push(item.scenicSpotName.toString())
          this.statisticsData.counts.push(item.commentCount.toString())
        })
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: { text: '景区评论统计' },
          tooltip: {},
          xAxis: {
            data: this.statisticsData.names
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: this.statisticsData.counts
          }]
        })
      }
      )
    }
  }
}
</script>
